<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
  <img src="https://images0.cnblogs.com/blog/315302/201411/010945579257474.png" alt="">
  <img src="https://images0.cnblogs.com/blog/315302/201411/010945579257474.png" alt="">
    <div>
        <p id="parEle" style="background-color: aqua;">我是父元素    <span id="sonEle" style="background-color: bisque;">我是子元素</span></p>
    </div>
</body>
</html>
<script type="text/javascript">
var sonEle = document.getElementById('sonEle');
var parEle = document.getElementById('parEle');

parEle.addEventListener('click', function () {
    alert('父级 冒泡');
}, false); // true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行
parEle.addEventListener('click', function () {
    alert('父级 捕获');
}, true);

sonEle.addEventListener('click', function () {
    alert('子级冒泡');
}, false);
sonEle.addEventListener('click', function () {
    alert('子级捕获');
}, true);

</script>